<template>
    <div id="viewQuestionView">
     <a-row :gutter="[24,24]">
        <a-col :md="12" :xs="24">
            <a-card v-if="question" :title="question.title">
              <MdViewer :value="question.content || ''" />
              <template #extra>
                <a-link>   
                 <a-space wrap>
                  <a-tag v-for="(tag, index) of question.tags" :key="index" color="green" >{{ tag }}</a-tag>
                 </a-space>
                </a-link>
              </template>
            </a-card>
        </a-col>

        <a-col :md="12" :xs="24">
         <a-form :model="form" layout="inline">
            <a-form-item field="language" label="编程语言">
              <a-select v-model="form.language" :style="{width:'160px'}" placeholder="Select" :trigger-props="{ autoFitPopupMinWidth: true }">
                  <a-option>java</a-option>
                  <a-option>cpp</a-option>
                  <a-option>go</a-option>  
               </a-select>
            </a-form-item>
          </a-form>
        
          <CodeEditor :value="form.code" 
          :language="form.language"
          :handle-change="changeCode"
          />
          <a-divider size="0" />
          <a-button type="primary" style="min-width: 200px;" @click="doSubmit">提交答案</a-button>
        </a-col>
     </a-row>
    </div>
</template>

<script setup lang="ts">
import { QuestionVO, QuestionControllerService, QuestionSubmitAddRequest,} from '../../../generated';
import { onMounted, ref } from 'vue';
import message from '@arco-design/web-vue/es/message';
import CodeEditor from '@/components/CodeEditor.vue';
import MdViewer from '@/components/MdViewer.vue';

interface Props{
    id:string;
}
const props =withDefaults(defineProps<Props>(),{
   id: () => "",
});

  const question=ref<QuestionVO>();

  const loadData=async()=>{
    const res=await QuestionControllerService.getQuestionVoByIdUsingGet(props.id as any);
    console.log(res.data);
    if(res.code === 0){
      question.value=res.data;
    }else{
        message.error("加载失败. "+res.message);
    }
  };

  const form=ref<QuestionSubmitAddRequest>({
    language:"java",
    code:"",
  });

  const doSubmit= async()=>{
    if(!question.value?.id){
      return;
    }
    const res= await QuestionControllerService.doQuestionSubmitUsingPost({
      ...form.value,
      questionId:question.value.id,
    }   
      );
    
    if(res.code === 0){
      message.success("提交成功");
    } else{
      message.error("提交失败, "+res.message);
    }
  };

  onMounted(()=>{
    loadData();
  });

  const changeCode=(value:string)=>{
     form.value.code=value;
  }

</script>

<style>
 #viewQuestionView {
  max-width:1600px;
  margin: 0 auto;
}

#viewQuestionView .arco-space-horizontal .arco-space-item {
  margin-bottom: 0!important;
}
</style>